<template>
  <div class="review-card">
    <div class="review-header">
      <div class="review-header-line">
        <div class="review-info">
                <span class="review-rating">
                  <ul class="star-box product-reviews-rating">
                    <li class="star-item" v-for="item in 5"><i class="material-icons" :class="item <= card.rating?'yellow':'gray'">star</i></li>
                  </ul>
                </span>
          <span class="review-display-name should-truncate is-truncated" style="word-wrap: break-word;">
                  {{card.reViewer.name}}
                </span>
          <span class="icon-check">
                  <i class="material-icons">
                    done_outline
                  </i>
                </span>
          <span class="review-verified-purchaser">
                  Verified Purchaser
                </span>
        </div>
        <span class="review-date">{{card.reViewAt | timeFormat}}</span>
      </div>
    </div>
    <div class="review-text-container">
      <div class="review-text">{{card.content}}</div>
    </div>
    <div class="review-actions clearfix">
      <div class="review-vote">
        <span class="review-vote-prompt">Was this helpful?</span>
        <button :class="{'disabled': disabled}" @click="addHelpful(card.id)">
          Yes
        </button>
      </div>
      <div class="review-vote-undo" v-show="undoShow">
              <span>
                <i class="material-icons">
                  done
                </i>
              </span>
        Thank you for your vote
        <a href="javascript:;" @click="removeHelpful(card.id)" class="vote-undo-link">
          (Undo)
        </a>
      </div>
      <div class="review-vote-text" v-show="helpfulCount > 0">{{helpfulCount}} people found this review helpful</div>
    </div>
    <div class="review-notification" v-show="undoSubmit">
      <span>
        <i class="material-icons">
          done
        </i>
      </span>
      Your request is now being processed.
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import * as reviews from 'api/reviews'
    export default {
      props: {
        card: {
          type: Object,
          default: function() {
            return {}
          }
        }
      },
      data() {
        return {
          helpfulShow: true,
          helpfulCount: 0,
          disabled: false,
          undoSubmit: false,
          undoShow: false
        }
      },
      created() {
        this.helpfulCount = this.card.helpfulCount
      },
      methods: {
        addHelpful(reviewId) {
          if (this.disabled) return
          reviews.postHelpful(reviewId)
            .then(res => {
              this.helpfulCount++
              this.disabled = true
              this.undoSubmit = false
              this.undoShow = true
            })
        },
        removeHelpful(reviewId) {
          reviews.delHelpful(reviewId)
            .then(res => {
              this.helpfulCount--
              this.disabled = false
              this.undoSubmit = true
              this.undoShow = false
            })
        }
      },
      filters: {
        timeFormat(time) {
          let t = new Date(time).toDateString().split(' ')
          const d = {
            1: 'st',
            2: 'nd',
            3: 'rd'
          }
          let end = t[2] % 10
          if (end <= 3 && end > 0) {
            t[2] = t[2] + d[end]
          } else {
            t[2] = t[2] + 'th'
          }
          if (t[2][0] === '0') {
            t[2] = t[2].substring(1)
          }
          return `${t[1]} ${t[2]},${t[3]}`
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

  .review-card
    border: 1px solid #f2f2f2
    margin: 10px 0
    overflow: hidden
    padding: 10px
    .review-header
      margin-top: 5px
      overflow: hidden
      .review-header-line
        margin-bottom: 5px
        overflow: hidden
        .review-info
          display: inline-block
          .review-rating
            float: left
          .review-display-name
            font-weight: 600
            margin: 1px 5px 0
            float: left
            max-width: 300px
            line-height: 16px
            color: #75787b
            font-size: 14px
          .icon-check
            color: #a5a8ab
            margin-top: 1px
            margin-right: 5px
            float: left
            > i
              font-size: 14px
          .review-verified-purchaser
            color: #a5a8ab
            margin-top: 1px
            line-height: 16px;
            font-size: 14px
        .review-date
          float: right
          line-height: 16px
          font-size: 14px
          font-weight: 400
          color: #75787b
    .review-text-container
      color: #75787b
      font-size: 14px
      font-weight: 400
      line-height: 1.5
      .review-text
        white-space: pre-wrap
        word-wrap: break-word
        margin-bottom: 7px
        overflow: hidden
      .rating-only-review
        font-style: italic
    .review-actions
      overflow: hidden
      color: #75787b
      font-size: 14px
      font-weight: 400
      line-height: 1.5
      .review-vote
        color: #a5a8ab
        float: left
        line-height: 30px
        margin-bottom: 7px
        button
          margin-left: 5px
          font-size: 12px
          border: 1px solid #a5a8ab
          color: rgb(117, 120, 123)
          display: inline-block
          cursor: pointer
          min-width: 180px
          outline: 0
          overflow: visible
          line-height: 1.4
          padding: .5em 2em
          border-radius: 2px
          position: relative
          background: #fff
          text-align: center
          transition: background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out
          &:hover
            background: #a5a8ab
            color: #fff

      .review-vote-undo
        clear: left
        margin-bottom: 5px;
        background: #A9D18C
        border: 1px solid #53A318
        border-radius: 2px
        padding: 20px 24px
        padding-left: 59px
        position: relative
        > span
          border: 1px solid green
          border-radius: 50%
          display: block
          margin-top: -13px
          height: 24px
          position: absolute
          text-align: center
          top: 50%
          width: 24px
          left: 18px
          > i
            padding-top: 3px
            font-size: 18px
            color: green
        .vote-undo-link
          color: #0D98E2

      .review-vote-text
        margin-bottom: 7px
        overflow: hidden
        clear: left
        font-weight: 600
        color: #75787b
        font-size: 14px
        line-height: 1.5
    .review-notification
      clear: left
      margin-bottom: 5px;
      background: #A9D18C
      border: 1px solid #53A318
      border-radius: 2px
      padding: 20px 24px
      padding-left: 59px
      position: relative
      color: #75787b;
      font-size: 14px;
      > span
        border: 1px solid green
        border-radius: 50%
        display: block
        margin-top: -13px
        height: 24px
        position: absolute
        text-align: center
        top: 50%
        width: 24px
        left: 18px
        > i
          padding-top: 3px
          font-size: 18px
          color: green
  .star-box
    display flex
    li:last-child
      color: #289fee
    li:nth-child(6)
      cursor: pointer
    .star-item
      width 16px
      height 16px
    .star-item i
      font-size 16px
  .yellow
    color: #fec038
  .gray
    color: #a1a0a0
  .hover-color
    color: rgb(1, 133, 198)
  .disabled
    cursor: default !important
    border-color: #D5D8DB !important
    color: #DADCDF !important
    &:hover
      background: #fff!important
      color: #DADCDF !important
</style>
